<template>
  <div class="s_wrap">
    <article>
      <div class="sec_top">
        <h1>Welcome to NanChang Metro</h1>
        <div class="dateBox">
          <div class="date">{{date}}</div>
          <div class="time">{{time}}</div>
        </div>
        <div class="weather">
          <div class="weatherIcon">
            <img src="img/sunny.png" alt />
          </div>
          <div class="weatherText">
            <p class="weatherTemp">
              <span class="weatherCValue">{{weather.centigrade}}</span>
              <span class="unit">℃</span>
              /
              <span class="weatherFValue">{{weather.fahrenheit}}</span>
              <span class="unit">℉</span>
            </p>
            <p class="weatherCity">{{weather.city}}</p>
          </div>
        </div>
        <div class="search">
          <input type="text" placeholder="例如:火车站到双港" class="i_search" />
          <input type="submit" class="i_submit" value />
        </div>
        <div class="select_item">
          <p>常见</p>
          <div class="slider">
            <div class="slider_item" v-for="(item, index) in $store.state.selectItem" :key="index">
              <a href="#">
                <div class="s_icon">
                  <img :src="item.path" alt />
                </div>
                <p>{{item.desc}}</p>
              </a>
            </div>
          </div>
        </div>
      </div>
    </article>
    <div class="sec_main">
      <div class="sm_items">
        <div class="sm_item" v-for="(item, index) in $store.state.ncMenu" :key="index">
          <a :href="item.site">
            <div class="pic">
              <img :src="item.path" alt />
            </div>
            <p>{{item.desc}}</p>
          </a>
        </div>
        <div class="sm_ul">
          <ul>
            <li>
              <a href="search.html">查询票价换乘</a>
            </li>
            <li>
              <a href="#">袖珍安全指南</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="sec_bottom">
      <div class="sb_box">
        <div class="sb_boxleft">
          <section class="theme">
            <h2>主题</h2>
            <div class="seeAll">
              <a href="#">查看全部</a>
            </div>
            <transition-group name="theme_list" tag="div">
              <div v-for="(item, index) in $store.state.activities" :key="item.name">
                <dl ref="acItem" v-if="index >=3 ? isDisplay:true">
                  <dt>{{item.time}}</dt>
                  <dd>
                    <a href="#">{{item.name}}</a>
                  </dd>
                </dl>
              </div>
            </transition-group>
            <div class="more">
              <a href="#" @click.prevent="displayActivity">{{text}}</a>
            </div>
          </section>
        </div>
        <div class="sb_boxright">
          <section class="audio">
            <video class="ncvideo" controls="controls">
              <source src="/video/ncmetro.mp4" type="video/mp4" />
            </video>
          </section>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import store from "../../store/index";
export default {
  store,
  data() {
    return {
      time: "",
      timer: null,
      weather: {
        centigrade: "",
        fahrenheit: "",
        weatherType: "",
        city: ""
      },
      isDisplay: false,
      text: "查看更多"
    };
  },
  created() {
    this.nowTimes();
    this.getWeather();
  },
  computed: {
    date() {
      return (
        this.getMonth() +
        " " +
        this.timeFormate(new Date().getDate()) +
        "," +
        new Date().getFullYear()
      );
    }
  },

  methods: {
    getTimeNow() {
      this.time =
        this.timeFormate(new Date().getHours()) +
        ":" +
        this.timeFormate(new Date().getMinutes()) +
        ":" +
        this.timeFormate(new Date().getSeconds()) +
        " " +
        (this.hour > 12 ? "am" : "pm");
    },
    timeFormate(temp) {
      if (temp < 10) {
        temp = "0" + temp;
      }
      return temp;
    },
    nowTimes() {
      this.getTimeNow();
      this.timer = setTimeout(this.nowTimes, 1000);
    },
    getMonth() {
      switch (new Date().getMonth() + 1) {
        case 1:
          return "January";
        case 2:
          return "February";
        case 3:
          return "March";
        case 4:
          return "April";
        case 5:
          return "May";
        case 6:
          return "June";
        case 7:
          return "July";
        case 8:
          return "August";
        case 9:
          return "September";
        case 10:
          return "October";
        case 11:
          return "November";
        case 12:
          return "December";
      }
    },
    getWeather() {
      let that = this;
      this.axios
        .get("http://wthrcdn.etouch.cn/weather_mini?city=南昌")
        .then(response => {
          let result = response.data.data;
          that.weather.centigrade = result.wendu;
          that.weather.fahrenheit = parseInt(
            that.weather.centigrade * 1.8 + 32
          );
          this.weather.city = result.city;
        });
    },
    displayActivity() {
      if (this.text == "查看更多") {
        this.text = "关闭";
      } else {
        this.text = "查看更多";
      }
      this.isDisplay = !this.isDisplay;
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearTimeout(this.timer);
    }
  }
};
</script>

<style scoped>
.s_wrap {
  width: 100%;
}
article {
  display: block;
  font-family: Helvetica, Arial, "sans-serif";
  background: url("/img/icon_nc_night.png") no-repeat center;
  background-size: cover;
  width: 100%;
  height: 620px;
}
h1,
.dateBox,
.weather {
  text-shadow: 0 0 5px #00467e;
  color: #fff;
}
h1 {
  width: 100%;
  font-size: 3rem;
  padding: 120px 0 0;
  margin-bottom: 50px;
  text-align: center;
}
.dateBox {
  display: flex;
  justify-content: center;
  font-size: 1.5rem;
  min-height: 24px;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.dateBox > .time {
  padding-left: 25px;
}
.weather {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.weatherIcon > img {
  width: 60px;
  height: 60px;
}
.weatherText {
  padding-top: 10px;
  margin-left: 10px;
}
.search {
  width: 100%;
  margin-top: 20px;
  text-align: center;
  position: relative;
}
.search > .i_search {
  /* vertical-align: middle; */
  box-sizing: border-box;
  width: 700px;
  height: 45px;
  font-size: 1.3rem;
  outline: none;
  border-radius: 25px;
  padding: 0 20px;
  border: none;
  color: #999;
}
.i_submit {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 30px;
  height: 30px;
  background: url(/img/header/icon_header_search.png) no-repeat;
  background-size: 30px auto;
  margin-left: 305px;
  cursor: pointer;
  outline: none;
  border: none;
}
.select_item {
  margin-top: 20px;
  width: 100%;
  color: #fff;
  font-size: 1.3rem;
  font-weight: bold;
  padding-bottom: 20px;
}
.select_item > p {
  text-align: center;
  margin-bottom: 20px;
}
.slider {
  display: flex;
  margin: 0 auto;
  width: 840px;
}
.slider_item {
  width: 140px;
  font-size: 0.9rem;
}
.slider_item .s_icon {
  position: relative;
  text-align: center;
}
.slider_item .s_icon > img {
  display: inline-block;
  width: 92px;
  height: 92px;
}
.slider_item p {
  text-align: center;
  padding: 0 10px;
  color: #fff;
}
.sec_main {
  max-width: 1280px;
  padding: 30px 68px 0;
  margin: 0 auto;
}
@media screen and (min-width: 1070px) {
  .sm_items {
    display: flex;
    padding: 0 10%;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    margin: 0 auto 87px;
  }
  .sm_items > .sm_item,
  .sm_ul {
    width: 30%;
  }
  .sb_box {
    display: flex;
    justify-content: space-around;
  }
  .sb_boxleft {
    width: 65%;
  }
  .sb_boxright {
    width: 31.6%;
  }
}
@media screen and (max-width: 1069px) {
  .sm_items {
    display: flex;
    padding: 0 2.6vw;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto 87px;
  }
  .sm_items > .sm_item,
  .sm_ul {
    width: 35vw;
    padding: 0 0 20px;
  }
  .sb_boxleft {
    margin-bottom: 50px;
  }
}
.sm_items > .sm_item,
.sm_ul {
  position: relative;
  text-align: center;
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 22px;
}
.sm_items > .sm_item::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 170px;
  background-color: #edf6f9;
  border-radius: 10px;
  z-index: -1;
  transition: background 0.3s;
}
.sm_items > .sm_item:hover::before {
  background: radial-gradient(circle, #edf6f9, rgba(7, 72, 161, 0.2));
}
.sm_items > .sm_item > a {
  padding-bottom: 20px;
}
.sm_items > .sm_item img {
  display: inline-block;
  width: 45%;
  min-width: 110px;
  /* transition: all .3s; */
}

.sm_items > .sm_item > a > p::before {
  content: "";
  display: inline-block;
  background: url("/img/icon_arrow_blue.png") no-repeat;
  background-size: 7px auto;
  width: 7px;
  height: 12px;
}

.sm_items > .sm_ul > ul > li {
  display: flex;
  align-items: center;
  min-height: 75px;
  padding-left: 90px;
}
.sm_items > .sm_ul > ul > li:first-of-type {
  background: url(/img/icon_pickup_01.png) no-repeat left center;
  background-size: 75px auto;
  margin-bottom: 20px;
}
.sm_items > .sm_ul > ul > li:last-of-type {
  background: url(/img/icon_pickup_02.png) no-repeat left center;
  background-size: 75px auto;
}
.sm_items > .sm_ul > ul > li a {
  font-size: 0.9rem;
  background: url("/img/icon_arrow_blue.png") no-repeat;
  background-size: 7px auto;
  padding-left: 20px;
}
.sm_items > .sm_ul > ul > li a:hover {
  text-decoration: underline;
}
.sec_bottom {
  margin-top: 30px;
  background-color: #f8f8f8;
  padding-bottom: 50px;
  display: flex;
  padding-top: 40px;
  width: 100%;
}

.sb_box {
  max-width: 1280px;
  padding: 0 68px;
  margin: 0 auto;
}
.theme {
  position: relative;
}
.theme > h2 {
  text-align: center;
}
.seeAll {
  position: absolute;
  right: 0;
  top: 6px;
}
.seeAll > a {
  font-size: 1.1rem;
  background: url(/img/icon_arrow_blue.png) no-repeat left center;
  background-size: 7px auto;
  padding-left: 14px;
}
.seeAll > a:hover {
  text-decoration: underline;
}
.theme dl {
  display: flex;
  border-bottom: 1px solid #e2e2e2;
  padding-bottom: 15px;
  margin-bottom: 15px;
  align-content: space-between;
}
.theme dl > dt {
  width: 140px;
  font-size: 0.9rem;
  color: #333;
}
.theme dl > dd {
  font-weight: bold;
  width: 80%;
}
.theme dl > dd:hover {
  text-decoration: underline;
}

.theme > .more > a {
  position: relative;
  width: 100%;
  height: 50px;
  font-size: 1.1rem;
  color: #fff;
  align-items: center;
  display: flex;
  border-radius: 3px;
  background-color: #a1a5aa;
  justify-content: center;
}
.theme > .more > a:hover::after {
  opacity: 1;
}
.theme > .more > a::before {
  content: "";
  background: url("/img/icon_arrow_down_white.png") no-repeat;
  background-size: 12px auto;
  width: 12px;
  height: 6px;
  display: block;
  position: absolute;
  top: 22px;
  left: 95.8%;
}
.theme > .more > a::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.3s;
}
.ncvideo {
  width: 100%;
  height: 260px;
  outline: none;
}
</style>